import React from 'react';
import ReactDOM from 'react-dom/client';
import './base.css';
const root = ReactDOM.createRoot(document.querySelector('#root'));

const list = [
  // { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  // { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  // { id: 3, name: '毛不易', content: '像我这样优秀的人' },
];

const loadData = () => {
  if (!list.length) return <div>暂无数据</div>;

  return (
    <ul className="list">
      {list.map((item) => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.content}</p>
        </li>
      ))}
    </ul>
  );
};

const ulNode = <>{loadData()}</>;
root.render(ulNode);
